<!DOCTYPE html>
<html>

<head>
    <title>Shader Graphing Utility</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <style type="text/css">
        html,
        body {
            padding: 0;
            margin: 0;
            overflow: hidden;
        }

        canvas {
            width: 100%;
            height: 100%;
        }

		#info {
			position: absolute;
			font-family: monospace;
			color: white;
			text-align: center;
			width: 100%;
			padding: 5px;
			pointer-events: none;
		}

		#dataContainer {
			position: fixed;
			font-family: monospace;
			color: white;
			pointer-events: none;
			width: 0;
			height: 0;
			visibility: hidden;
		}

		#data {
			margin-top: 10px;
			transform: translate( -50%, 0 );
			display: inline-block;
			white-space: pre;
		}

		#dataContainer::after {
			content: '';
			position: absolute;
			border: 1px solid white;
			border-radius: 10px;
			width: 5px;
			height: 5px;
			top: 0;
			left: 0;
			display: inline-block;
			transform: translate( -50%, -50% );
		}

		canvas {
			cursor: none;
		}
    </style>
</head>

<body>
	<div id="dataContainer">
		<div id="data">TEST</div>
	</div>
	<div id="info">Utility for graphing shader function outputs.</div>
    <script type="module" src="./graphing.js"></script>
</body>

</html>
